<template>
  <div>
    <Header_h />
    <nav class="details_nav">
      <div class="containers">
        <span class="title_color" @click="$router.push('/web/home')">首页 / </span>
        <span class="title_color" @click="$router.push('/web/activities')"
          >中心活动</span
        >
      </div>
    </nav>
    <article class="core_content">
      <div class="containers">
        <section class="s_flex s_justify_content news_box">
          <section class="core_content_left">
            <div class="details_head">
              <div>
                <h3 class="title_size title_color">
                  {{ list.title }}
                </h3>
              </div>
              <div class="pos">
                <p class="ck ">时间: {{ list.active_time }}</p>
                <p class="ck ">地点: {{ list.active_pos }}</p>
              </div>
              <div class="s_flex s_justify_content times s_align_items">
                <div class="content_color time">
                  <span class="sq_success" v-if="list.active_status == 1"
                    >报名中</span
                  >
                  <span class="sq_end" v-if="list.active_status == 2"
                    >已结束</span
                  >
                </div>
                <!-- <div>
                  <div class="s_flex s_align_items inco_w">
                    <span class="content_color time">分享该文：</span>
                    <div class="inco_ws s_flex s_align_items s_justify_content">
                      <i class="iconfont icon-weibo"></i>
                      <i class="iconfont icon-weibo"></i>
                      <i class="iconfont icon-weibo"></i>
                      <i class="iconfont icon-weibo"></i>
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="desc_tosp">
              <p v-html="list.content"></p>
            </div>
          </section>
          <!-- <aside class="core_content_right">
            <p class="title_size title_color right_title">最新动态：</p>
            <div class="flex-column list_right">
              <div class="item_right_img">
                <img
                  class="item_right_img"
                  src="../../../public/new_banner.jpg"
                  alt=""
                />
              </div>
              <div>
                <p
                  class="content_size content_color ellipsis2 content_right_spacing"
                >
                  2019年7月4日，首批“顺企知识产权讲师团”专家评审会在顺德新能源汽车小镇顺利举行。本次评审会邀请了广东科达洁能股份有限公司董事、顺企中心理事……
                </p>
              </div>
            </div>
            <div class="flex-column list_right">
              <div class="item_right_img">
                <img
                  class="item_right_img"
                  src="../../../public/new_banner.jpg"
                  alt=""
                />
              </div>
              <div>
                <p
                  class="content_size content_color ellipsis2 content_right_spacing"
                >
                  2019年7月4日，首批“顺企知识产权讲师团”专家评审会在顺德新能源汽车小镇顺利举行。本次评审会邀请了广东科达洁能股份有限公司董事、顺企中心理事……
                </p>
              </div>
            </div>
            <div class="flex-column list_right">
              <div class="item_right_img">
                <img
                  class="item_right_img"
                  src="../../../public/new_banner.jpg"
                  alt=""
                />
              </div>
              <div>
                <p
                  class="content_size content_color ellipsis2 content_right_spacing"
                >
                  2019年7月4日，首批“顺企知识产权讲师团”专家评审会在顺德新能源汽车小镇顺利举行。本次评审会邀请了广东科达洁能股份有限公司董事、顺企中心理事……
                </p>
              </div>
            </div>
          </aside> -->
        </section>
      </div>
    </article>
    <Footer />
    <!-- <navItem /> -->
      <rightMenu @moveTo="moveTo" />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import rightMenu from "@/components/web/rightMenu";
import { activityInfo } from "@/api/web";

export default {
  components: {
    Header_h,
    Footer,
    
    rightMenu
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
     moveTo() {
      window.scrollTo(0, 0);
    },
    async getList() {
      try {
        this.list = await activityInfo({ active_id: this.$route.query.id });
      } catch (error) {
        this.$message.success(error.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .desc_tosp p {
  width: 100%;
}
/deep/ .desc_tosp img {
  width: 100%;
}
.details_nav {
  width: 100%;
  padding: 15px 0;
  background: #edf1f4;
}
/* core_content */
.core_content {
  background: #f7fbfe;
  padding: 40px 0;
}

.core_content .item_list_img {
  width: 224px;
  height: 127px;
  object-fit: cover;
  margin-right: 25px;
}

.core_content .item_list {
  border-bottom: 1px solid #eee;
  padding: 25px 10px;
}

.core_content .item_list:last-child {
  border-bottom: none;
}

.core_content .content_spacing {
  margin: 17px auto 30px;
}
.news_box {
  margin: 20px 0;
}
.core_content_left {
  // width: 70%;
  width: 100%;

  // background-color: #fff;
  // margin:10px 0;
  height: 100%;
  // position: absolute;
  // top: 0;
  // left: 0;
}
.core_content_right {
  width: 25%;
  background-color: #fff;
  // position: absolute;
  // top:0;
  // right: 0;
  // margin:10px 0;
}
.item_right_img {
  width: 281px;
  height: 181px;
  object-fit: cover;
}
.content_right_spacing {
  margin: 10px 0;
}
.list_right {
  border-top: 1px solid #eee;
  padding: 10px 0;
  margin: 0 10px;
}
.right_title {
  margin: 0 10px;
  padding: 10px 0;
}
/* core_content */
.inco_w {
  // width: 300px;
  .iconfont {
    font-size: 25px;
    margin-left: 10px;
  }
  .inco_ws {
    width: 50%;
  }
}
.desc_tosp {
  padding: 30px 0;
  border-top: 1px solid #dbdbdb;
}

.details_head {
  margin: 0 0 40px;
  .times {
    margin-top: 20px;
  }
}
.next_to {
  margin: 40px 0;
  cursor: pointer;
}
.pos {
  margin: 40px 0;
}
</style>